<template>
	<v-chart :option="chartOptions" autoresize style="height: 300px;" />
</template>

<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'
import * as echarts from 'echarts'

const props = defineProps({
	data: Object,
	threshold: Number
})

const chartOptions = computed(() => ({
	title: { text: '能耗趋势图' },
	tooltip: { trigger: 'axis' },
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: props.data?.xAxis || []
	},
	yAxis: { type: 'value' },
	series: [
		{
			data: props.data?.series || [],
			type: 'line',
			smooth: true,
			markLine: props.threshold
				? {
					symbol: 'none',
					data: [
						{
							yAxis: props.threshold,
							lineStyle: {
								color: '#F56C6C',
								type: 'dashed'
							},
							label: {
								formatter: `告警阈值：${props.threshold}`
							}
						}
					]
				}
				: undefined
		}
	]
}))
</script>
